<template>
  <div>
    <!-- 表格 -->
    <div class="add_table_css">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="studyYear" label="继续教育年度" width="150"></el-table-column>
        <el-table-column prop="major" label="专业或主要内容" width="250"></el-table-column>
        <el-table-column prop="address" label="学习地点" width="250"></el-table-column>
        <el-table-column prop="period" label="学时" width="150"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" plain size="small" class="btn_css_si">查看附件</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block page_css">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="limit"
        @current-change="change"
        @prev-click="prev"
        @next-click="next"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      limit: 5,
      total: 0,
      staffId: 7,
      tableData: [],
      dialogFormVisible: false
    };
  },
  methods: {
    /* 页面渲染 */
    getCon() {
      this.$axios({
        url: "/teach/list",
        method: "post",
        data: {
          page: this.page,
          limit: this.limit,
          staffId: this.staffId
        }
      }).then(res => {
        console.log(res.data);
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
    },
    /* 分页渲染 */
    change(page) {
      this.page = page;
      this.getCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },
    next() {
      this.page++;
      this.getCon();
    },

    handleClick(row) {
      //   this.dialogFormVisible2 = true;
      console.log(row);
    },
  },
  mounted(){
    this.getCon();
  }
};
</script>
<style scoped lang="less">
.page_css {
  margin: 10px;
  text-align: right;
  margin-right: 135px;
}
.el-table {
  font-size: 13px;
}
.btn_css_si {
  background-color: #f7f7f7;
  border: 1px solid #eee;
  width: 80px;
  height: 30px;
  text-align: center;
}
.add_table_css {
  border: 1px solid #eee;
  // height: 790px;
  padding: 20px;
  margin-right: 135px;
}
</style>